<template>
  <div class="com-container">
    <div class="com-chart" ref="stock_ref"></div>
  </div>
</template>

<script>
import { getStockData } from "../api"
export default {
  name: "Stock",
  data() {
    return {}
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener("resize", this.adaptChart)
    this.adaptChart()
  },
  destroyed() {
    window.removeEventListener("resize", this.adaptChart)
  },
  methods: {
    // 初始化echarts
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.stock_ref, "chalk")
    },
    // 得到数据
    getData() {
      this.updateChart()
    },
    // 更新数据
    updateChart() {},
    // 分辨率适配
    adaptChart() {
      // 随着屏幕的大小改变而改变
      const fontsize = (this.$refs.map_ref.offsetWidth / 100) * 3.6
      const option = {}
      this.chartInstance.setOption(option)
      // 调用图表事件 图表才会发生大小
      this.chartInstance.resize()
    },
  },
}
</script>
<style lang="less" scoped></style>
